<template>
  <div class="rightContent">
    <label>
      <span>文档名称</span>
      <input type="text" placeholder="请输入" v-model="searchWord">
      <span class="btn-blue search" @click="getFileList">查询</span>
      <span class="btn-white2 reset" @click="reset">重置</span>
    </label>
    <table cellspacing="0">
      <thead>
      <th>文档名称</th>
      <th>上传时间</th>
      <th>文件大小</th>
      <th>操作</th>
      </thead>
      <tbody>
      <tr v-for="item in fileList" :key="item.file_id">
        <td>
          <img :src="item.file_name | imgSrc" alt="">
          {{ item.file_name | fileNameCut }}
        </td>
        <td>{{ item.add_time }}</td>
        <td>{{ item.file_size_str }}</td>
        <td>
          <span class="download cp" @click="download(item.file_id, item.file_name)">下载</span>
          <span class="delete cp" @click="clickDelete(item.file_name, item.file_id)">删除</span>
        </td>
      </tr>
      </tbody>
    </table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="12"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <min-dialog-box v-if="ifShowDelete" :dialogData="dialogData" @confirmBtnEvent="confirmDelete"
                    @cancelBtnEvent="cancelDelete"></min-dialog-box>
  </div>
</template>

<script>
export default {
  name: 'rightContent',
  data () {
    return {
      // 是否展示删除弹框
      ifShowDelete: false,
      // 删除弹框内容
      dialogData: {
        mainTips: [
          ''
        ],
        btnList: [
          {
            name: '确定',
            color: 'blue',
            type: 'confirm'
          },
          {
            name: '取消',
            color: 'white',
            type: 'cancel'
          }
        ],
        fileId: +''
      }
    }
  },
  computed: {
    // 文件列表
    fileList () {
      return this.$store.state.filePage.fileList
    },
    // 文件列表查询字符
    searchWord: {
      get () {
        return this.$store.state.filePage.searchWord
      },
      set (val) {
        this.$store.commit('filePage/set_searchWord', val)
      }
    },
    // 当前页
    currentPage () {
      return this.$store.state.filePage.currentPage
    },
    // 文件总数
    total () {
      return this.$store.state.filePage.total
    }
  },
  methods: {
    // 获取文件列表
    getFileList () {
      this.$store.dispatch('filePage/getFileList').then(res => {
        if (!res.data.data.data && res.data.data.current_page > 1) {
          this.$store.commit('filePage/set_currentPage', res.data.data.current_page - 1)
          this.getFileList()
        }
      })
    },
    // 重置
    reset () {
      this.$store.commit('filePage/set_searchWord', '')
    },
    // 切换分页
    handleCurrentChange (val) {
      this.$store.commit('filePage/set_currentPage', val)
      this.getFileList()
    },
    // 下载
    download (fileID, fileName) {
      this.$store.dispatch('file/downloadFile', { fileType: 3, fileID: fileID }).then(res => {
        this.tools.download(res, fileName)
      })
    },
    // 点击删除
    clickDelete (fileName, fileId) {
      this.ifShowDelete = true
      this.dialogData.mainTips[0] = `确定删除“${fileName}”吗?`
      this.dialogData.fileId = fileId
    },
    // 确定删除
    async confirmDelete () {
      await this.$store.dispatch('filePage/fileDelete', this.dialogData.fileId).then(res => {
        if (res.data && res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
      await this.getFileList()
      this.ifShowDelete = false
    },
    // 取消删除
    cancelDelete () {
      this.ifShowDelete = false
    }
  },
  created () {
    this.getFileList()
  },
  beforeDestroy () {
    this.$store.commit('filePage/set_searchWord', '')
  }
}
</script>

<style scoped lang="scss">
.rightContent {
  height: calc(100% - 72px);
  padding: 24px 20px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 12px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #d8dee9;
    border-radius: 2px;
  }

  label {
    span {
      font-size: 12px;
      margin-right: 12px;
    }

    input {
      width: 270px;
      height: 32px;
      border: 1px solid #D8DEE9;
      border-radius: 2px;
      font-size: 12px;
      padding-left: 12px;
      vertical-align: middle;
    }

    .search, .reset {
      display: inline-block;
      width: 72px;
      height: 32px;
      line-height: 32px;
      vertical-align: middle;
      margin-left: 30px;
      font-size: 14px;
      margin-right: 0;
    }

    .reset {
      margin-left: 12px;
    }
  }

  table {
    margin-top: 24px;
    width: 100%;

    thead {
      th {
        font-weight: 500;
        font-size: 14px;
        text-align: left;
        background-color: #F9FAFF;
        height: 60px;
        border-bottom: 1px solid #EBEDF3;

        &:first-child {
          padding-left: 20px;
          width: 900px;
        }

        &:nth-child(2) {
          width: 220px;
          min-width: 126PX;
        }

        &:nth-child(3) {
          width: 160px;
        }
        &:last-child {
          min-width: 85PX;
        }
      }
    }

    tbody {
      tr {
        td {
          height: 60px;
          font-size: 14px;
          text-align: left;
          color: #0D172C;
          line-height: 60px;
          border-bottom: 1px solid #EBEDF3;

          &:first-child {
            padding-left: 20px;
          }

          .download {
            text-decoration: underline;
            color: #304EEC;
          }

          .delete {
            text-decoration: underline;
            color: #FF3E6D;
          }

          img {
            width: 32px;
            height: 32px;
            vertical-align: middle;
            margin-right: 16px;
          }

          span {
            margin-right: 24px;
          }
        }
      }
    }
  }

  .el-pagination {
    margin-top: 24px;
    text-align: right;
  }
}
</style>
